<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文章编辑</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.5.5/css/layui.css}"
          href="../../../static/layuimini/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" href="../../../static/layuimini/css/public.css"
          media="all">
    <script type="text/javascript" th:src="@{/layuimini/lib/ueditor/ueditor.config.js}" charset="utf-8"
            src="ueditor.config.js"></script>
    <script type="text/javascript" th:src="@{/layuimini/lib/ueditor/ueditor.all.min.js}" charset="utf-8"
            src="ueditor.all.min.js"></script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" th:src="@{/layuimini/lib/ueditor/lang/zh-cn/zh-cn.js}" charset="utf-8"
            src="lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">

    </style>
</head>
<body>


<div class="layuimini-container">
    <div class="layuimini-main">

        <form id="editContentForm" class="layui-form" lay-filter="editContentForm">

            <div class="layui-row">

                <div class="layui-col-md8">
                    <div class="layui-form-item" style="margin-bottom: 0;">
                        <label class="layui-form-label" style="padding:  5px 0;width: auto">文章标题</label>
                        <div class="layui-input-inline" style="width: 100%;">
                            <input type="text" name="contentTitle" value=""
                                   lay-verify="required" placeholder="文章标题" autocomplete="off"
                                   class="layui-input" th:value="${contentInfo!=null?contentInfo.contentTitle:''}">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label" style="width: auto;padding: 5px 0;">正文</label>
                        <div class="layui-input-inline" style="width: 100%">
                            <script id="editor" type="text/plain" style="width:100%;height:500px;"></script>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item"></div>
                    <fieldset class="layui-elem-field" style="margin-left: 10px">
                        <legend>SEO优化</legend>

                        <div class="layui-field-box">
                            <div class="layui-form-item">
                                <label class="layui-form-label">keywords：</label>
                                <div class="layui-input-inline" style="width: 370px;">
                                    <input type="text" name="keywords" value=""
                                           placeholder="keywords用,隔开。" autocomplete="off"
                                           class="layui-input" th:value="${contentInfo!=null?contentInfo.keywords:''}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">摘要</label>
                                <div class="layui-input-inline" style="width: 370px;">
                                    <textarea id="description" name="description" class="layui-textarea" style="min-height: 38px;"
                                              maxlength="50"
                                              placeholder="文章摘要，50字内。不填写将自动抓取前50字"
                                              th:text="${contentInfo!=null?contentInfo.description:''}"></textarea>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset class="layui-elem-field" style="margin-left: 10px">
                        <legend>类别标签</legend>

                        <div class="layui-field-box">
                            <div class="layui-form-item">
                                <label class="layui-form-label">类别：</label>
                                <div class="layui-input-inline" style="width: 370px;">
                                    <select id="contentType" name="contentType" lay-filter="contentType"
                                            lay-verify="required">
                                        <option th:each="contentType:${contentTypeList}"
                                                th:value="${contentType.typeId}" th:text="${contentType.typeName}"
                                                th:selected="${contentInfo!=null?(contentType.typeId==contentInfo.contentType):false}"
                                                value="1">文章类别
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">标签：</label>
                                <div class="layui-input-inline" style="width: 370px;">
                                    <div class="tags" id="tags">
                                        <input type="text" name="tagIds" id="inputTags" placeholder="回车生成标签"
                                               autocomplete="off">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input type="checkbox" name="baiduSubmit" value="1" lay-skin="primary" title="百度链接提交" checked="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="contentPublish">发布
                            </button>
                            <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="contentDraft">存稿件
                            </button>
                        </div>
                    </div>

                </div>
            </div>

            <!--隐藏-->
            <input type="hidden" id="contentId" name="contentId" th:value="${param.contentId}">
<!--            <input type="hidden" id="status" name="status" th:value="${contentInfo!=null?contentInfo.status:''}">-->
        </form>
    </div>
</div>


<script th:src="@{/layuimini/lib/layui-v2.5.5/layui.js}" src="../../../static/layuimini/lib/layui-v2.5.5/layui.js"
        charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" src="../../../static/layuimini/js/lay-config.js?v=1.0.4"
        charset="utf-8"></script>

<script type="text/javascript">
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');


    var $;
    //禁用鼠标右键
    document.oncontextmenu = new Function("event.returnValue=false;");
    layui.use(['form', 'table', 'inputTags'], function () {
        $ = layui.jquery,
            form = layui.form,
            inputTags = layui.inputTags;

        var tag;
        $.get('[[@{/}]]manage/content-tag/contentTagList?contentId=[[${param.contentId}]]', function (data) {
            if (data.success) {
                var tagNames = [];
                $(data.data).each(function () {
                    tagNames.push(this.typeName);
                });
                tagRender(tagNames);
            }

        });
        function tagRender(tagNames){
            tag = inputTags.render({
                elem: '#inputTags',//定义输入框input对象
                content: tagNames,//默认标签
                aldaBtn: false,//是否开启获取所有数据的按钮
                done: function (value) { //回车后的回调
                    tagSubmitBack(value);
                }
            });
        }


        /**
         *
         * @param tag 标签名
         */
        function tagSubmitBack(tag) {
            $.post('[[@{/}]]manage/content-tag/tagSave',{typeName:tag},function () {

            });
        }

        form.render();//更新渲染

        form.on('submit(editContentForm)', function () {
            return false;
        });
        form.on('submit(contentPublish)', function () {
            contentSave(1);
            return false;
        });
        form.on('submit(contentDraft)', function () {
            contentSave(2);
            return false;
        });


        function contentSave(status) {
            if (!$('[name=editorValue]').val() || $('[name=editorValue]').val().length == 0) {
                layer.msg('内容不能为空！', {anim: 6, icon: 5});
                return false;
            }
            var formData = $('#editContentForm').serializeArray();
            formData.push({name: 'status', value: status});
            var content = UE.getEditor('editor').getContent();
            //封面提取
            var cover = $(content).find('img').attr('src');
            formData.push({name: 'cover', value: cover});
            formData.push({name: 'contentInfo', value: content});
            if (tag.config.content){
                formData.push({name:'tagNames',value:tag.config.content});
            }
            var formJsonData = parseSerializeArrayToJson(formData);
            formJsonData.editorValue = null;
            console.log(formData);
            console.log(formJsonData);
            debugger;
            layer.load(2);
            $.ajax({
                type: 'post',
                url: '[[@{/}]]manage/content/save',
                data: formJsonData,
                traditional: true,//传统方式传递数组
                dataType: 'json',
                success: function (result) {
                    console.log(result);
                    if (result.success) {
                        $('#contentId').val(result.data.contentId);
                        $('#description').val(result.data.description);
                        layer.msg("保存操作成功");
                    } else {
                        layer.msg(result.msg);
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    layer.msg(textStatus);
                },
                complete: function () {
                    layer.closeAll('loading');
                }
            });
        }

    });
    ue.ready(function () {
        //设置编辑器的内容
        ue.setContent(unescape("[[${contentInfo!=null?contentInfo.contentInfo:''}]]"));
    });

    // 将HTML转义为实体
    function escape(html) {
        var elem = document.createElement('div')
        var txt = document.createTextNode(html)
        elem.appendChild(txt)
        return elem.innerHTML;
    }

    // 将实体转回为HTML
    function unescape(str) {
        var elem = document.createElement('div')
        elem.innerHTML = str
        return elem.innerText || elem.textContent
    }

    /**
     * 序列化数组转对象
     * @param serializeArray
     * @returns {{}}
     */
    function parseSerializeArrayToJson(serializeArray) {
        var obj = {};
        $(serializeArray).each(function () {
            if (obj[this.name]) {
                if ($.isArray(obj[this.name])) {
                    obj[this.name].push(this.value);
                } else {
                    obj[this.name] = [obj[this.name], this.value];
                }
            } else {
                obj[this.name] = this.value;
            }
        });
        return obj;
    }

</script>
</body>
</html>